<template>
  <div
    class="map-marker"
    :class="[`marker-${type}`, { 'active': isActive }]"
    :style="markerStyle"
  >
    <div class="marker-pin">
      <div class="marker-icon">
        <span v-if="marker.icon">{{ marker.icon }}</span>
        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
      </div>
    </div>
    
    <div class="marker-pulse" v-if="showPulse"></div>
    
    <div class="marker-label" v-if="showLabel">
      {{ marker.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapMarker',
  props: {
    marker: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'default' // default, highlight, restaurant, viewpoint, facility
    },
    showLabel: {
      type: Boolean,
      default: false
    },
    showPulse: {
      type: Boolean,
      default: false
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    markerStyle() {
      // 基于图片尺寸计算标记点位置
      // 这样标记点会跟随背景图一起移动
      return {
        left: `${this.marker.x}%`,
        top: `${this.marker.y}%`,
        transform: 'translate(-50%, -100%)'
      }
    }
  },
  // 移除所有事件处理，让父组件处理点击事件
}
</script>

<style lang="scss" scoped>
.map-marker {
  position: absolute;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;

  &:hover {
    transform: translate(-50%, -100%) scale(1.1);
    z-index: 25;
  }

  &.active {
    z-index: 30;

    .marker-pin {
      transform: scale(1.2);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
  }
}

.marker-pin {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  position: relative;
  
  .marker-icon {
    transform: rotate(45deg);
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.marker-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: rgba(255, 255, 255, 0.6);
  animation: pulse 2s infinite;
}

.marker-label {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.map-marker:hover .marker-label {
  opacity: 1;
}

// 不同类型的标记样式
.marker-default .marker-pin {
  background: #2196F3;
  
  .marker-icon {
    color: white;
  }
}

.marker-highlight .marker-pin {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  
  .marker-icon {
    color: white;
  }
}

.marker-restaurant .marker-pin {
  background: #4CAF50;
  
  .marker-icon {
    color: white;
  }
}

.marker-viewpoint .marker-pin {
  background: #9C27B0;
  
  .marker-icon {
    color: white;
  }
}

.marker-facility .marker-pin {
  background: #FF9800;
  
  .marker-icon {
    color: white;
  }
}

@keyframes pulse {
  0% {
    transform: rotate(-45deg) scale(1);
    opacity: 1;
  }
  70% {
    transform: rotate(-45deg) scale(2);
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg) scale(2);
    opacity: 0;
  }
}

// 移动端优化
@media (max-width: 768px) {
  .map-marker {
    &:hover {
      transform: translate(-50%, -100%);
    }
  }
  
  .marker-pin {
    width: 28px;
    height: 28px;
    
    .marker-icon {
      font-size: 14px;
    }
  }
  
  .marker-pulse {
    width: 28px;
    height: 28px;
  }
  
  .marker-label {
    font-size: 11px;
    padding: 3px 6px;
  }
}
</style>
